<template>
  <div class="followup-box inner-content">
    <div class="inner inner-content-box">
      <div class="searchBox">
        <el-form
          :inline="true"
          :model="searchForm"
          size="small"
          style="width: 100%"
        >
          <el-form-item label="考试名称">
            <el-select v-model="recordsId" placeholder="请选择" :clearable="false" :filterable="true" style='width: 240px'>
              <el-option
                v-for="item in recordsOptions"
                :key="item.id"
                :label="item.recordsName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getList"
              size="small"
              icon="el-icon-search"
              >搜索</el-button
            >
            <el-button @click="searchReset" size="small" icon="el-icon-delete"
              >清空</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="detailsBox">
        <ag-grid-vue
          class="ag-theme-alpine ag-theme-quartz"
          :gridOptions="gridOptions"
          :localeText="localeText"
          :rowHeight="38"
          :headerHeight="42"
          @grid-ready="onGridReady"
          @selection-changed="getSelectedRows"
          @sort-changed="onSortChangedAggrid"
          @filter-changed="onFilterChangedAggrid"
          :isRowSelectable="isRowSelectable"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :rowData="rowData"
          rowSelection="multiple"
          :rowMultiSelectWithClick="true"
          :enableRangeSelection="true"
        >
        </ag-grid-vue>
      </div>
      <div class="pageBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="修改详情"
      :visible.sync="detailVisible"
      :fullscreen='true'
      width="400px"
      :before-close="passClose">
      <div style="padding: 10px 10px;font-size: 16px;height: calc( 100vh - 70px);width:1000px;margin: 0 auto;overflow: auto;">
        <div class="title_des">题目</div>
        <div class="contentBox">
          {{ examInfo.examName }}
        </div>
        <div class="title_des">题干</div>
        <div class="contentBox">
          {{ examInfo.examText }}
        </div>
        <div class="title_des">重要知识点</div>
        <div class="contentBox">
          {{ examInfo.examNotes }}
        </div>
        <div class="title_des">考评打分</div>
        <!-- examScoreSet  大分项 1     小分项 2  -->
        <!-- 小分项 start -->
        <div class="contentBox contentInner" v-if="examScoreSet === '2'">
          <div class="headBox">
            <div class="headItem headItem1">大类</div>
            <div class="headItem headItem2">判断标准</div>
            <div class="headItem headItem3">满分</div>
            <div class="headItem headItem4">修改前得分</div>
            <div class="headItem headItem5">修改后得分</div>
          </div>
          <div class="contentInnerBox" v-for="(item,index) in scoreCardList" :key='index'>
            <div class="contentItem1">{{ item.item }}</div> 
            <div class="innerDes">
							<div v-for="(q,i) in item.children" :key="i" class="innerDesList" style="display: flex;">
								<div :class="'innerCon ' + ( q.editBeforeSmall !== q.result ? 'innerConDef' : '')">
									{{ q.scoreCardScoringCriteria }}
								</div>
								<div :class='"scoreBox1 " + ( q.editBeforeSmall !== q.result ? "scoreBox1Def" : "")' style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
									{{ q.scoreCardTotalScore }}
								</div>
                <div :class='"scoreBox2 " + ( q.editBeforeSmall !== q.result ? "scoreBox2Def" : "")' style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
									{{ q.editBeforeSmall }}
								</div>
                <div :class='"scoreBox3 " + ( q.editBeforeSmall !== q.result ? "scoreBox3Def" : "")' style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
									{{ q.result }}
								</div>
							</div>
            </div>
          </div>
          <div class="headBox headBoxBot">
            <div class="headItem headItem1">总分</div>
            <div class="headItem headItem2"></div>
            <div class="headItem headItem3"> {{ allScore }}</div>
            <div class="headItem headItem4">{{ allScoreResultBefore }}</div>
            <div class="headItem headItem5">{{ allScoreResult }}</div>
          </div>
        </div>
        <!-- 小分项 end -->
         <!-- 大分项 start -->
         <div class="contentBox contentInner" v-if="examScoreSet === '1'">
          <div class="headBox">
            <div class="headItem headItem1">大类</div>
            <div class="headItem headItem2">判断标准</div>
            <div class="headItem headItem3">满分</div>
            <div class="headItem headItem4" style="border-right: 1px solid #00796B50">修改前得分</div>
            <div class="headItem headItem5">修改后得分</div>
          </div>
          <div class="contentInnerBox" v-for="(item,index) in scoreCardList" :key='index'>
            <div class="contentItem1">{{ item.item }}</div> 
            <div class="innerDes">
							<div v-for="(q,i) in item.children" :key="i" class="innerDesList" style="display: flex;">
								<div :class="'innerCon ' + ( q.editBeforeBig !== q.bigResult ? 'innerConDef' : '')">
									{{ q.scoreCardScoringCriteria }}
								</div>
							</div>
            </div>
            <div :class='"contentItem2 " + (item.children[0].editBeforeBig !== item.children[0].bigResult ? "contentItem2Def" : "")' style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
                {{ item.children[0].allBigResult }}
              </div>
              <div :class='"contentItem3 " + (item.children[0].editBeforeBig !== item.children[0].bigResult ? "contentItem3Def" : "")'  style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
                {{ item.children[0].editBeforeBig }}
              </div>
              <div :class='"contentItem4 " + (item.children[0].editBeforeBig !== item.children[0].bigResult ? "contentItem4Def" : "")' style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
                {{ item.children[0].bigResult }}

              </div>
          </div>
          <div class="headBox headBoxBot">
            <div class="headItem headItem1">总分</div>
            <div class="headItem headItem2"></div>
            <div class="headItem headItem3" style="border-right: none !important;"> {{ allScore }}</div>
            <div class="headItem headItem4">{{ allScoreResultBefore }}</div>
            <div class="headItem headItem5">{{ allScoreResult }}</div>
          </div>
        </div>
        <!-- 大分项 end -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import Vue from 'vue'
import listBtn from '@/views/modules/examTest/editExamList/listBtn.vue'
import state from '@/views/modules/examTest/editExamList/state.vue'
import listJson from '@/views/modules/examTest/editExamList/list.json'
import { recordsstudentexaminationpermission, recordsstudentexaminationpermissionListDetails, fetchList } from '@/api/examTest.js'
export default {
  beforeMount () {
    this.gridOptions = {
      // 通过这个属性建立了上下文引用
      context: { componentParent: this }
      // 说人话就是可以在自己声明的组件里调用到父组件的方法和属性了
    }
  },
  components: {
    listBtn,
    state
  },
  data () {
    return {
      user: this.$store.state.user,
      dataSelect: [],
      gridOptions: null,
      localeText: this.$AG_GRID_LOCALE_ZZZ,
      col: [],
      page: {
        pageSizes: [100, 2000, 5000],
        currentPage: 1,
        total: 0,
        pageSize: 100
      },
      searchForm: {
        recordsName: ''
      },
      defaultColDef: {
        editable: false,
        sortable: true,
        resizable: true,
        filter: true,
        cellDataType: false
      },
      isRowSelectable: null,
      rowIndexArr: [
        {
          field: 'rowIndex',
          headerName: '序号',
          width: 80,
          checkboxSelection: false,
          headerCheckboxSelection: false,
          sortable: false,
          pinned: 'left',
          valueGetter: (params) => {
            // 返回当前行的序号
            return params.node.rowIndex + 1
          }
        },
        {
          field: 'handle',
          headerName: '操作',
          width: 70,
          pinned: 'right',
          cellRenderer: 'listBtn'
        }
      ],
      columnDefs: [ ],
      gridApi: null,
      rowData: [],
      msg: null,
      detailVisible: false,
      btnLoading: false,
      examId: '',
      recordsOptions: [],
      recordsId: '',
      examInfo: {},
      scoreCardList: [],
       // 大分项 1     小分项 2
      examScoreSet: '',
      allScore: 0,
      allScoreResult: 0,
      allScoreResultBefore: 0
    }
  },
  watch: {
    $route: {
      handler (newValue, oldValue) {
        if (oldValue.name === 'examTest-editExamList/list') {
          this.detailVisible = false
          this.examTestCountryVisible = false
          this.$refs.examDetail.closeHandle()
        }
      },
      deep: true
    }
  },
  created () {
    this.getHeadersCol()
    this.getRecordsList()
    // this.getList()
  },
  methods: {
    onSortChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.rowData))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.rowData = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    onFilterChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.rowData))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.rowData = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    getRecordsList () {
      let params = {
        limit: 1000,
        page: 1
      }
      fetchList(params).then(res => {
        if (res.data.page.records.length > 0) {
          this.recordsOptions = res.data.page.records
          this.recordsId = res.data.page.records[0].id
          this.getList()
        }
      })
    },
    // 获取选中
    getSelectedRows () {
      this.dataSelect = this.gridApi.getSelectedRows()
    },
    // 获取表头
    getHeadersCol () {
      this.columnDefs = []
      setTimeout(() => {
        this.col = JSON.parse(JSON.stringify(listJson.column))
        this.columnDefs = this.rowIndexArr.concat(this.col)
      }, 10)
    },
    // 装载列表
    onGridReady (params) {
      this.gridApi = params.api
    },
    getDetails () {
      let params = {
        id: this.examId
      }
      recordsstudentexaminationpermissionListDetails(params).then(res => {
        this.examInfo = res.data.examination
        // 大分项 1     小分项 2
        this.examScoreSet = res.data.examScoreSet
        // 评分卡
        let scoreCardListBak = res.data.nowOneDetails.sort((a, b) => {
          return a.ordersn - b.ordersn
        })
        let editBefore = res.data.thisOneDetails.sort((a, b) => {
          return a.ordersn - b.ordersn
        })
        this.allScore = 0
        this.allScoreResult = 0
        this.allScoreResultBefore = 0
        scoreCardListBak.map(v => {
          editBefore.map(q => {
            if (v.scoreCardId === q.scoreCardId) {
              v.editBeforeSmall = q.result
              v.editBeforeBig = q.bigResult
              // 大分项 1     小分项 2
              if (this.examScoreSet === '2') {
                this.allScore += Number(v.scoreCardTotalScore)
                this.allScoreResult += Number(v.result)
                this.allScoreResultBefore += Number(q.result)
              }
            }
          })
        })
        this.allScore = this.allScore.toFixed(2)
        this.allScoreResult = this.allScoreResult.toFixed(2)
        this.allScoreResultBefore = this.allScoreResultBefore.toFixed(2)
        let fatherIdsBak = scoreCardListBak.map(v => {
          return v.scoreCardItem
        })
        let fatherIds = [...new Set(fatherIdsBak)]
        let newArr = []
        fatherIds.map(item => {
          newArr.push({
            item: item,
            itemScore: 0,
            itemScoreResult: 0,
            children: []
          })
        })
        if (this.examScoreSet === '1') {
					// 大分项
          scoreCardListBak.map(q => {
            newArr.map(p => {
              if (q.scoreCardItem === p.item) {
                p.children.push(Object.assign(q, {result: q.scoreCardTotalScore}))
                p.itemScore = p.itemScore + q.scoreCardTotalScore
                p.itemScoreResult = p.children[0].bigResult
              }
            })
          })
          this.allScore = 0
          this.allScoreResult = 0
          this.allScoreResultBefore = 0
          this.scoreCardList = JSON.parse(JSON.stringify(newArr))
          this.scoreCardList.map(q => {
            this.allScore += Number(q.itemScore)
            this.allScoreResult += Number(q.itemScoreResult)
            this.allScoreResultBefore += Number(q.children[0].editBeforeBig)
          })
          this.allScore = this.allScore.toFixed(2)
          this.allScoreResult = this.allScoreResult.toFixed(2)
          this.allScoreResultBefore = this.allScoreResultBefore.toFixed(2)
        } else {
					// 小分项
          scoreCardListBak.map(q => {
            newArr.map(p => {
              if (q.scoreCardItem === p.item) {
                p.children.push(Object.assign(q, {result: q.result}))
                p.itemScore = p.itemScore + q.scoreCardTotalScore
              }
            })
          })
          this.scoreCardList = JSON.parse(JSON.stringify(newArr))
        }
      })
    },
    getList () {
      let params = {
        recordsId: this.recordsId,
        limit: this.page.pageSize,
        page: this.page.currentPage,
        orderSql: 'creat_date desc'
      }
      recordsstudentexaminationpermission(params).then(res => {
        this.rowData = res.data.page.records
        this.rowData.map(v => {
          v.examStatusName = String(v.examStatus) === '0' ? '待考试' : String(v.examStatus) === '1' ? '已结束' : '暂无'
          v.examDate = v.examStartDate.substring(0, 16) + ' ~ ' + v.examEndDate.substring(5, 11)
        })
        this.page.total = res.data.page.total
        this.dataSelect = []
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getList()
    },
    // 清空搜索
    searchReset () {
      this.searchForm = {}
      this.page.currentPage = 1
      // this.getList();
    },
    // 审核通过 start
    detailHandle (val) {
      this.detailVisible = true
      this.examId = val.id
      this.getDetails()
    },
    passClose () {
      this.detailVisible = false
    }
  }
}
</script>
<style lang='scss'>
  .title_des{
    font-size: 16px;
    color: #00b99e;
    height: 30px;
    line-height: 30px;
    position: relative;
    padding-left: 20px;
    background: #00b99e30;
    border-radius: 6px;
    // padding-left: 20px;
  }
  .title:before{
    content: '';
    height: 16px;
    width: 3px;
    border-radius: 4px;
    background: #00b99e;
    position: absolute;
    top: 6px;
    left: 10px;
  }
  .contentBox{
    padding: 10px;
    font-size: 14px;
  }
  .contentInner{
    padding: 0;
    margin: 10px 0;
    .headBox{
      height: 36px;
      background: rgba(72, 83, 104, 0.5);
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px 6px 0 0;
      overflow: hidden;
      font-size: 14px;
      font-weight: 600;
      .headItem{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        border-left: 1px solid #00796B50;
      }
      .headItem:last-child{
        border-left:none;
      }
      .headItem1{
        width: 160px;
      }
      .headItem2{
        flex: 1;
      }
      .headItem3{
        width: 60px;
      }
      .headItem4{
        width: 100px;
      }
      .headItem5{
        width: 100px;
      }
    }
    .headBoxBot{
      background: none;
      height: 46px;
      border-bottom: 1px solid #00796B50;
      .headItem3{
        border-right: 1px solid #00796B50 !important;
        color: #33333390 !important;
        font-size: 18px;
        font-weight: 600;
      }
      .headItem4{
        border-right: 1px solid #00796B50 !important;
        color: #FF6D00 !important;
        font-size: 18px;
        font-weight: 600;
      }
      .headItem5{
        border-right: 1px solid #00796B50 !important;
        color: #00b99e !important;
        font-size: 18px;
        font-weight: 600;
      }
    }
    .contentInnerBox{
      display: flex;
      align-items: stretch;
      justify-content: center;
      border: 1px solid #00796B50;
      border-top: none;
      .contentItem1{
        width: 160px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .innerDes{
        flex: 1;
        .innerDesList{
          .innerCon{
            flex: 1;
            line-height: 18px;
            padding: 10px;
            border-bottom: 1px solid #00796B50;
            border-left: 1px solid #00796B50;
            border-right: 1px solid #00796B50;
          }
          .innerConDef{
            background: rgba(213, 0, 0, 0.1);
          }
        }
        .innerDesList:last-child{
          .innerCon{
            border-bottom: none;
          }
          .scoreBox1{
            border-bottom: none !important;
          }
          .scoreBox2{
            border-bottom: none !important;
          }
          .scoreBox3{
            border-bottom: none !important;
          }
        }
      }
      .contentItem2{
        font-size: 16px;
        font-weight: 600;
        color: #33333390 !important;
        width: 59px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: none !important;
      }
      .contentItem3{
        font-size: 16px;
        font-weight: 600;
        color: #FF6D0060 !important;
        width: 99px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: none !important;
      }
      .contentItem4{
        font-size: 16px;
        font-weight: 600;
        color: #00b99e60 !important;
        width: 99px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: none !important;
        border-right: none !important
      }
      .contentItem2Def{
        background: rgba(213, 0, 0, 0.1);
      }
      .contentItem3Def{
        font-size: 16px;
        font-weight: 600;
        color: #FF6D00 !important;
        background: rgba(213, 0, 0, 0.1);
      }
      .contentItem4Def{
        font-size: 16px;
        color: #00b99e !important;
        font-weight: 600;
        background: rgba(213, 0, 0, 0.1);
      }
    }
    .scoreBox1{
      width: 60px;
      font-size: 16px;
      font-weight: 600;
      color: #33333390 !important;
    }
    .scoreBox1Def{
      background: rgba(213, 0, 0, 0.1) !important;
    }
    .scoreBox2{
      width: 99px;
      font-size: 16px;
      font-weight: 600;
      color: #FF6D0060 !important;
    }
    .scoreBox2Def{
      color: #FF6D00 !important;
      background: rgba(213, 0, 0, 0.1);
    }
    .scoreBox3{
      width: 99px;
      font-size: 16px;
      font-weight: 600;
      color: #00b99e60 !important;
    }
    .scoreBox3Def{
      color: #00b99e !important;
      background: rgba(213, 0, 0, 0.1);
    }
  }
  
</style>